<template>
  <div class="home-header">
    <navbar>
      <i class="iconfont back" slot="left" >&#xe61e;</i>
      <searchBox slot="center" class="searchbar"></searchBox>
      <div class="city-wrapper" slot="right" @click="turnCity">
        <span class="city">{{this.currentCity}}</span>
        <i class="iconfont arrow" slot="right">&#xe68d;</i>
      </div>
    </navbar>
  </div>
</template>
<script>
import navbar from '@/base/navbar'
import searchBox from '@/base/searchBox'
import { mapState } from 'vuex'
export default {
  name: 'homeHeader',
  components: {
    navbar,
    searchBox
  },
  computed: {
    ...mapState({
      currentCity: 'city'
    })
  },
  methods: {
    turnCity () { // 跳转到城市选择页面
      this.$router.push({ name: 'city' })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/variables'
.home-header
  background $bgColor
  font-size 20px
  .back
    color #fff
    width 40px
    display block
    text-align center
  .searchbar
    line-height 1.5
    background #fff
  .city-wrapper
    color #fff
    padding-left 15px
    padding-right 15px
    .city
      padding-right 6px
</style>
